import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom';

import { NavBar, Space, Button, Cascader } from 'antd-mobile'
import { SearchOutline, DownOutline, LocationFill } from 'antd-mobile-icons'

import { getAllHouseList } from '../../api/request';

import styles from './index.module.scss';
import stylehouse from '../Map/index.module.scss';
export default function Search() {


    const navigate = useNavigate();
    // 筛选区域框状态
    const [visible, setVisible] = useState(false)
    // 区域的的options
    const [options, setOptions] = useState([]);
    // 所有房源
    const [houseList,setHouseList] = useState([]);
    // 跳转到地图
    const goMap = () => {
        navigate('/map');
    }

    const right = (
        <div style={{ fontSize: 24 }} onClick={goMap}>
            <Space style={{ '--gap': '16px' }}>
                <LocationFill />
            </Space>
        </div>
    )

    const back = () => {
    }

    // 获取当地所有房源
    const get_allHouseList =async (id) => {
        const {data:{body:{list}}} = await getAllHouseList(id);
        setHouseList(list);
    }
    const {label,value} = JSON.parse(localStorage.getItem('city'));
    useEffect(() => { 
        get_allHouseList(value);
    }, []);
    return (
        <div className={styles.Search_box}>
            {/* 搜索头 */}
            <NavBar onBack={back} right={right} className={styles.adm_nav_bar}>
                <div className={styles.swiper_box}>
                    {/* 搜索框 */}
                    <div className={styles.search_box}>
                        <div className={styles.location} onClick={() => {
                            navigate('/citylist');
                        }}>
                            <span className={styles.location_name}>{label}</span>
                            <DownOutline />
                        </div>
                        <div className={styles.search}>
                            <SearchOutline fontSize={21} />
                            <span>请输入搜索内容</span>
                        </div>
                    </div>

                </div>
            </NavBar>
            {/* 筛选条件 */}
            <div className={styles.options}>
                <Button

                    onClick={() => {
                        setVisible(true)
                    }}
                >
                    区域<DownOutline />
                </Button>
                <Cascader
                    options={options}
                    visible={visible}
                    onClose={() => {
                        setVisible(false)
                    }}
                />
                <Button
                    onClick={() => {
                        setVisible(true)
                    }}
                >
                    方式<DownOutline />
                </Button>
                <Cascader
                    options={options}
                    visible={visible}
                    onClose={() => {
                        setVisible(false)
                    }}
                />
                <Button
                    onClick={() => {
                        setVisible(true)
                    }}
                >
                    租金<DownOutline />
                </Button>
                <Cascader
                    options={options}
                    visible={visible}
                    onClose={() => {
                        setVisible(false)
                    }}
                />
                <Button
                    onClick={() => {
                        setVisible(true)
                    }}
                >
                    筛选<DownOutline />
                </Button>
                <Cascader
                    options={options}
                    visible={visible}
                    onClose={() => {
                        setVisible(false)
                    }}
                />
            </div>
            {/* 房源列表 */}

            <div className={stylehouse.houseItems}>
                {/* 房屋结构 */}
                {houseList.map(item => (
                    <div className={stylehouse.house} key={item.houseCode}>
                        <div className={stylehouse.imgWrap}>
                            <img
                                className={stylehouse.img}
                                src={`http://localhost:8080${item.houseImg}`}
                                alt=""
                            />
                        </div>
                        <div className={stylehouse.content}>
                            <h3 className={stylehouse.title}>{item.title}</h3>
                            <div className={stylehouse.desc}>{item.desc}</div>
                            <div>
                                {item.tags.map((tag, index) => (
                                    <span
                                        className={[stylehouse.tag, stylehouse.tag1].join(' ')}
                                        key={tag}
                                    >
                                        {tag}
                                    </span>
                                ))}
                            </div>
                            <div className={stylehouse.price}>
                                <span className={stylehouse.priceNum}>{item.price}</span> 元/月
                            </div>
                        </div>
                    </div>
                ))}
            </div>

        </div>
    )
}
